<template>
	<view>
		<view>
			<view class="list" v-for="item in personList">
				<view class="itemList">
					<view class="name">
						{{item}}
					</view>
				</view>
				<view>
					{{' '}}
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				personList: []
			}
		},
		onLoad(options) {
			this.personList = options.personList.split(',')
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.top {
		padding: 32rpx 32rpx;
		background-color: white;
	}

	.list {
		padding: 32rpx 32rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid rgba(235, 236, 237, 1);

		.itemList {
			display: flex;

			.name {
				margin-right: 20rpx;
			}
		}
	}

	.hui {
		width: 120rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: rgba(125, 125, 125, 0.2);
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.lan {
		width: 120rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: rgba(33, 115, 222, 0.2);
		color: rgba(25, 98, 224, 1);
		text-align: center;
	}

	.lv {
		width: 120rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: rgba(40, 184, 105, 0.2);
		color: rgba(40, 184, 105, 1);
		text-align: center;
	}

	.hong {
		width: 120rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: rgba(255, 77, 77, 0.2);
		color: rgba(255, 77, 77, 1);
		text-align: center;
	}
</style>
